<template>
  <div class="post-detail">
    <!-- 返回按钮 -->
    <div class="back-btn">
      <el-button icon="el-icon-back" @click="$router.push('/forum')">返回列表</el-button>
    </div>

    <!-- 帖子详情 -->
    <el-card v-if="post" class="post-card">
      <div class="post-header">
        <el-avatar :src="'/api/file/get/' + post.userAvatar" :size="50"></el-avatar>
        <div class="post-info">
          <div class="post-title">{{ post.title }}</div>
          <div class="post-meta">
            <span class="author">{{ post.username }}</span>
            <span class="time">{{ formatTime(post.createdAt) }}</span>
          </div>
        </div>
      </div>
      
      <div class="post-content">{{ post.content }}</div>
      
      <el-image 
        v-if="post.imageUrl" 
        :src="`/api/file/get/${post.imageUrl}`"
        :preview-src-list="[`/api/file/get/${post.imageUrl}`]"
        fit="cover"
        class="post-image"
      ></el-image>
    </el-card>

    <!-- 评论区 -->
    <div class="comment-section">
      <div class="comment-header">
        <h3>评论区</h3>
        <span class="comment-count">{{ comments.length }}条评论</span>
      </div>

      <!-- 评论输入框 -->
      <div class="comment-form">
        <el-input
          type="textarea"
          v-model="commentForm.content"
          :rows="4"
          placeholder="写下你的评论..."
          :maxlength="500"
          show-word-limit
        ></el-input>
        
        <div class="form-footer">
          <el-upload
            class="upload-demo"
            action="/api/file/upload"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :before-upload="beforeUpload"
          >
            <el-button size="small" type="primary" icon="el-icon-picture">
              上传图片
            </el-button>
          </el-upload>
          
          <el-button 
            type="primary" 
            @click="submitComment" 
            :loading="submitting"
            :disabled="!commentForm.content.trim()"
          >
            发表评论
          </el-button>
        </div>

        <!-- 预览图片 -->
        <div v-if="commentForm.imageUrl" class="preview-image">
          <el-image 
            :src="`/api/file/get/${commentForm.imageUrl}`"
            class="upload-preview"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <i class="el-icon-delete" @click="removeImage"></i>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comments-list">
        <el-card v-for="comment in comments" :key="comment.id" class="comment-item">
          <div class="comment-header">
            <el-avatar :src="'/api/file/get/' + comment.userAvatar" :size="40"></el-avatar>
            <div class="comment-info">
              <div class="username">{{ comment.username }}</div>
              <div class="comment-time">{{ formatTime(comment.createdAt) }}</div>
            </div>
          </div>
          
          <div class="comment-content">{{ comment.content }}</div>
          
          <el-image 
            v-if="comment.imageUrl" 
            :src="`/api/file/get/${comment.imageUrl}`"
            :preview-src-list="[`/api/file/get/${comment.imageUrl}`]"
            fit="cover"
            class="comment-image"
          ></el-image>
        </el-card>

        <!-- 无评论提示 -->
        <div v-if="comments.length === 0" class="no-comment">
          暂无评论，快来抢沙发吧~
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from '@/utils/time'
import request from '@/utils/request'
export default {
  name: 'PostDetail',
  data() {
    return {
      post: null,
      comments: [],
      commentForm: {
        content: '',
        imageUrl: ''
      },
      submitting: false
    }
  },
  created() {
    this.fetchPost()
    this.fetchComments()
  },
  methods: {
    formatTime,
    async fetchPost() {
      try {
        const res = await request.get(`/api/forum/posts/${this.$route.params.id}`)
        this.post = res.data
      } catch (error) {
        this.$message.error('获取帖子详情失败')
      }
    },
    async fetchComments() {
      try {
        const res = await request.get(`/api/forum/posts/${this.$route.params.id}/comments`)
        this.comments = res.data.records
      } catch (error) {
        this.$message.error('获取评论列表失败')
      }
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    handleUploadSuccess(res) {
      this.commentForm.imageUrl = res.data
      this.$message.success('上传成功')
    },
    removeImage() {
      this.commentForm.imageUrl = ''
    },
    async submitComment() {
      if (!this.commentForm.content.trim()) {
        this.$message.warning('请输入评论内容')
        return
      }

      this.submitting = true
      try {
        await request.post(`/api/forum/posts/${this.$route.params.id}/comments`, this.commentForm)
        this.$message.success('评论成功')
        this.commentForm = { content: '', imageUrl: '' }
        this.fetchComments()
      } catch (error) {
        this.$message.error('评论失败')
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped>
.post-detail {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.back-btn {
  margin-bottom: 20px;
}

.post-card {
  margin-bottom: 30px;
}

.post-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.post-info {
  margin-left: 15px;
  flex: 1;
}

.post-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.post-meta {
  color: #909399;
  font-size: 14px;
}

.post-meta .author {
  margin-right: 10px;
}

.post-content {
  font-size: 16px;
  line-height: 1.8;
  margin: 20px 0;
  white-space: pre-wrap;
}

.post-image {
  max-width: 100%;
  border-radius: 8px;
  margin: 10px 0;
}

.comment-section {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.comment-header h3 {
  margin: 0;
  margin-right: 10px;
}

.comment-count {
  color: #909399;
  font-size: 14px;
}

.comment-form {
  margin-bottom: 30px;
}

.form-footer {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preview-image {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}

.upload-preview {
  width: 200px;
  height: 200px;
  border-radius: 4px;
}

.el-icon-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
  color: #F56C6C;
  cursor: pointer;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  padding: 5px;
}

.comment-item {
  margin-bottom: 20px;
}

.comment-info {
  margin-left: 10px;
}

.username {
  font-weight: bold;
  font-size: 14px;
}

.comment-time {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.comment-content {
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.comment-image {
  max-width: 300px;
  border-radius: 4px;
}

.no-comment {
  text-align: center;
  color: #909399;
  padding: 30px 0;
}
</style> 